import { ReactNode } from "react"
import IconFont from "../IconFont"
import { Checkbox, CheckboxProps, Radio, RadioProps } from "antd"

interface ItemProps {
  plateNumber?: ReactNode
  icon?: ReactNode
  name?: ReactNode
  driverName?: any
  onClick?(): void
  /**
   * @desc 如果有该事件，则会产生一个下级按钮
   */
  onNext?(): void
  /**
   * @desc 如果有该事件，则会产生一个删除按钮
   */
  onDelete?(): void
}
/**
 * @desc 较为通用的Item。用做列表渲染。可以渲染组织和人员或者类似形式的数据
 */
export function CommonItem({
  icon,
  name,
  onNext,
  onClick,
  onDelete,
  plateNumber
}: ItemProps) {
  console.log(plateNumber, "plateNumber")
  return (
    <div
      onClick={onClick}
      style={{
        display: "flex",
        alignItems: "center",
        gap: 4,
        width: "100%",
        height: 32,
        marginBottom: 10
      }}
    >
      <div hidden={!icon}>{icon}</div>
      <div
        style={{
          flexGrow: 1,
          width: 1,

          overflow: "hidden",
          textOverflow: "ellipsis",
          whiteSpace: "nowrap",
          height: 32,
          lineHeight: "32px",
          fontSize: 14
        }}
      >
        {name}
        <span
          className="bandCR"
          style={{ marginLeft: 10, fontSize: 12, color: "#999999" }}
        >
          {plateNumber ? plateNumber : ""}
        </span>
      </div>
      {onNext ? <NextButton onClick={onNext}></NextButton> : null}
      {onDelete ? <DeleteButton onClick={onDelete}></DeleteButton> : null}
    </div>
  )
}

/**
 * @desc 下一级按钮
 */
function NextButton({ onClick }: { onClick?(): void }) {
  return (
    <button
      style={{ width: 64, color: "#fa541c", cursor: "pointer" }}
      onClick={onClick}
    >
      |
      <IconFont type="icon-subordinate" />
      下级
    </button>
  )
}

/**
 * @desc 删除按钮
 */
function DeleteButton({ onClick }: { onClick?(): void }) {
  return (
    <button style={{ width: 64 }} onClick={onClick}>
      |
      <IconFont type="icon-subordinate" pointer />
      下级
    </button>
  )
}

type CheckWrapperPorps = (
  | {
      type?: "CheckBox"
      onChange?: CheckboxProps["onChange"]
    }
  | {
      type?: "Radio"
      onChange?: RadioProps["onChange"]
    }
) & {
  children?: ReactNode
  value?: string
  checked?: boolean
  driverName?: string
}

export function CheckWrapper({ type, children, ...props }: CheckWrapperPorps) {
  return type ? (
    <div style={{ display: "flex", width: "100%" }}>
      <div
        style={{
          width: 32,
          textAlign: "center",
          display: "flex",
          alignItems: "center",
          justifyContent: "center"
        }}
      >
        {type === "CheckBox" ? (
          <Checkbox style={{ margin: 0 }} {...props}></Checkbox>
        ) : null}
        {type === "Radio" ? (
          <Radio style={{ margin: 0 }} {...props}></Radio>
        ) : null}
      </div>
      <div style={{ flexGrow: 1 }}>{children}</div>
    </div>
  ) : (
    <>{children}</>
  )
}
